<template>
	<view class="indent-tag">
		<!-- 根据状态显示不同标签 -->
		<uni-tag :text="statusText" :type="tagType" :inverted="inverted" :circle="circle" />
	</view>
</template>

<script>
	export default {
		props: {
			status: {
				type: [String, Number],
				default: 0
			},
			// 是否空心
			inverted: {
				type: [Boolean],
				default: false
			},
			// 是否圆角
			circle: {
				type: [Boolean],
				default: false
			},
			dict_key: {
				type: [String],
				default: "repair_order_status"
			}
		},
		data() {
			return {
				dictList: []
			}
		},
		computed: {
			// 状态文本映射
			statusText() {
				const map = {}
				this.dictList.forEach(item => {
					map[item.dictValue] = item.dictLabel
				})
				return map[this.status] || '未知状态'
			},

			// 标签类型映射
			tagType() {
				const typeMap = {}
				this.dictList.forEach(item => {
					if (item.listClass == "danger") {
						typeMap[item.dictValue] = "error"
					} else if (item.listClass == "info") {
						typeMap[item.dictValue] = ""
					} else {
						typeMap[item.dictValue] = item.listClass
					}

				})
				return typeMap[this.status] || 'default'
			},
		},
		created() {
			this.getDictList()
		},
		methods: {
			getDictList() {
				this.getDicts(this.dict_key).then(res => {
					this.dictList = res.data;
				})
			}
		}
	}
</script>
<style>
	.indent-tag {
		display: inline-block;
		padding:3px;
	}
</style>